<?php
header("Content-type:text/html;charset=utf-8");
include_once 'commonDB.php';
	?>
	
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/TSH.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />-->
		<title>Hello编程</title>
	</head>

	<body>
		<div id="wrap">
			<div id="navigation">
				<!--让导航居中-->
				<div id="nav">
					<!--导航logo-->
					<div id="nav_log" class="nav_log">
						<a id="navloga" href="putou.php"><img class="nav_log_img" src="img/nav_logo.gif" /></a>
					</div>
					<div id="nav_junp" class="nav_jump">
						<!--首页-->
						<div><a id="first" href="putou.php">首页</a></div>
						<!--葡萄产品-->
						<div><a id="grapes" href="###">葡萄产品</a></div>
						<!--葡萄纬度-->
						<div><a id="latitude" href="latitude.php">葡萄纬度</a></div>
						<!--APP下载-->
						<div><a id="APPdownload" href="APP.php">APP下载</a></div>
						<!--嘉年华-->
						<div><a id="carnival" href="JNH.php">嘉年华</a></div>
					</div>
					<div id="nav_load" class="nav_load">
						<!--登陆-->
						<div><a id="load" href="denglu.php">登陆</a></div>
						<!--注册-->
						<div><a id="registered" href="zhuce2.php">注册</a></div>
					</div>
				</div>
			</div>
			<!--隐藏-->
			<div id="grapes_hover">
				<div id="keepout">
					<?php
                         $sql = "select * from putao_chanpin order by id desc limit 6";
                         $result = mysql_query($sql);
                       while ($row =mysql_fetch_assoc($result)) {
                       ?>
                       <div><a href="<?php echo $row["href"]; ?>"><img src="<?php echo $row["scr"]; ?>"/><?php echo $row["txt"]; ?></a></div>
                    
                       <?php } ?>
				</div>
			</div>
			<!--悬停栏-->
			<div id="hover">
				<div class="hoverbody">
					<h4>
						<a href="###">Hello编程</a>
					</h4>
					<a href="###">
						<span>立即购买</span>
					</a>
					<div class="hovernav">
						<a href="">概述</a>
					</div>
				</div>
			</div>
			<div id="content">
				<div class="contanim">
					<div class="contanimber">
						<img class="startra" src="http://static.putaocdn.com/store/front/images/special/exploration/img_explore_01_01_startrails.png" />
						<img class="logo" src="http://static.putaocdn.com/store/front/images/special/exploration/img_explore_01_01_logo.png" />
						<img class="ipad" src="http://static.putaocdn.com/store/front/images/special/exploration/img_explore_01_01_ipad.png" />
						<img class="dete" src="http://static.putaocdn.com/store/front/images/special/exploration/img_explore_01_01_detector.png" />
						<img class="base" src="http://static.putaocdn.com/store/front/images/special/exploration/img_explore_01_01_base.png" />
						<div class="video-cont-show">
							<span>观看视频演示</span>
							<img src="http://static.putaocdn.com/store/front/images/special/exploration/img_explore_01_01_play.png" />
						</div>
					</div>
				</div>
				<div class="contcube">
					<div class="contcubeber">
						<img src="img/img_explore_01_02_hands.png" />
						<div class="contcubeber-text">
							<p class="fontsize1">重新定义孩子学习和游戏的方式<br>
								<span class="fontsize2">独一无二的游戏体验</span>
							</p>
							<p class="fontsize3">
								葡萄探索号硬件部分包含七巧板、魔方和手鼓三个玩具，<br> 依然传统的益智玩法,通过巧妙独到的图像识别技术，
								<br> 与iPad里的虚拟APP游戏结合，让孩子在科技游戏中吸收经典智慧。
							</p>
						</div>
					</div>
				</div>
				<div class="contbow">
					<div class="contbowber">
						<div class="contbowber-text">
							<p class="fontsize1">
								不让下一代成为“低头族”<br>
								<span class="fontsize2">快乐不止于屏幕</span>
							</p>
							<p class="fontsize3">
								以最恰当的科技重塑经典玩具，让孩子离一臂之外，<br> 眼睛与屏幕保持健康距离的同时，允许多人一起玩耍，
								<br> 无论家庭聚会还是孩子Party，娱乐互动更添欢乐。
							</p>
						</div>
					</div>
				</div>
				<div class="conttaotao">
					<div class="conttaotaober">
						<div class="conttaotaober-text">
							<span class="fontsize1">淘淘向右走</span>
							<p class="fontsize2">
								古老的七巧板邂逅iPad，产生了神奇的化学反应。<br> 通过视觉识别系统，小朋友线下完成七巧板拼图，
								<br> 和线上精灵伙伴淘淘进行冒险之旅。
								<br> 在解决一个又一个困难的过程中,
								<br> 坚韧不拔的品质深植孩子心中，
								<br> 专注力、想象力、创造力、空间智能也将得到大大的提升。
							</p>
							<a href="###">
								<button>查看详情</button>
							</a>
						</div>
						<img class="taotaopic" src="img/img_explore_01_04_ipad.jpg" />
					</div>
				</div>
				<div class="contgar">
					<div class="contgarber">
						<div class="contgarber-text">
							<span class="fontsize1">班得瑞的奇幻花园</span>
							<p class="fontsize2">
								通过线上线下结合的新颖操作,跟着活泼生动的故事情节，<br> 敲击无国界多元化的音乐节奏，经历着一场又一场可爱的小冒险。
								<br> 小朋友线下敲击鼓面的节奏，通过识别推动线上游戏，
								<br> 让操作空间更广阔，音乐学习更有趣。
								<br>
							</p>
							<a href="###">
								<button>查看详情</button>
							</a>
						</div>
						<img class="garpic" src="img/img_explore_01_05_ipad.jpg" />
					</div>
				</div>
				<div class="contrev">
					<div class="contrevber">
						<div class="contrevber-text">
							<span class="fontsize1">旋转吧!&nbsp;&nbsp;魔方</span>
							<p class="fontsize2">
								魔方是最经典的益智玩具之一，手脑并用，变化无穷，<br> 锻炼孩子的记忆力以及分析和解决问题的能力，
								<br> 但大多数孩子因为不能还原魔方而无法体会魔方的魅力。
								<br> “旋转吧！魔方”用计算机视觉技术，
								<br> 实现了实体魔方玩具的所有面和颜色的精准识别，
								<br> 实时生成魔方还原步骤，
								<br> 让孩子可以无师自通学会还原魔方，体验魔方的魅力。
								<br>
							</p>
							<a href="###">
								<button>查看详情</button>
							</a>
						</div>
						<img class="revpic" src="img/img_explore_01_06_ipad.jpg" />
					</div>
				</div>
				<div class="contdes">
					<div class="contdesber">
						<img src="http://static.putaocdn.com/store/front/images/special/exploration/img_explore_01_07_text.png">
						<a href="###">
							<button>立即开启探索之旅</button>
						</a>
					</div>
				</div>
				<div class="contend">
					<div class="contendder">
						<img src="http://static.putaocdn.com/store/front/images/special/exploration/img_explore_01_07_p.jpg">
						<div class="contendder-text">
							<p>愿所有童心未泯的人们，<br>能在葡萄探索号中体验到科技带来的非凡乐趣。</p>
						</div>
					</div>
				</div>
			</div>
			<div id="abyejiaoly">
				<footer>
					<div id="footer_left"></div>
					<div id="footer_middle">
						<div>
							<h4>订单中心</h4>
							<a href="###">售后政策</a>
							<a href="###">配送常见问题</a>
							<a href="###">支付方式</a>
							<a href="###">支付常见问题</a>
							<a href="###">购物指南</a>
						</div>
						<div>
							<h4>服务支持</h4>
							<a href="###">配送方式</a>
							<a href="###">隐私政策</a>
							<a href="###">账户常见问题</a>
							<a href="###">淘淘向右走常见问题</a>
							<a href="###">班德瑞使用常见问题</a>
						</div>
						<div>
							<h4>商务合作</h4>
							<a href="###">商务合作</a>
						</div>
						<div>
							<h4>关于葡萄</h4>
							<a href="###">关于葡萄</a>
							<a href="###">联系我们</a>
						</div>
						<div>
							<h4>关于我们</h4>
							<a href="###">葡萄纬度</a>
						</div>
					</div>
					<div id="footer_right">
						<a href="###"><img src="img/btn_consult_qq@2x.png" /></a>
						<a href="###"><h2>400-651-6161</h2></a>
					</div>
					<h6>Copyright © 2016, Shanghai Putao Technology Co., Ltd. All Rights Reserved. 上海葡萄纬度科技有限公司</h6>
					<a href="###">沪IC备15015904号-3</a>
				</footer>
			</div>
			<!--显示视频-->
			<div id="bombig"></div>
			<div id="bomvideo">
				<div id="bomvideo-head">
					<button type="button" class="col">×</button>
					<h4>演示视频</h4>
				</div>
				<div id="video" style="width:862px;height:524px;display: block">
					<object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0634/v/swf/loader.swf?VideoIDS=XMTM4MzcwNzQ4NA%3D%3D&isShowRelatedVideo=false&winType=BDskin&embedid=MTgyLjIwMS4xNzIuODMCMzQ1OTI2ODcxAgI%3D&wd=&partnerid=5c30db50b42ae8c4&vext=pid%3D5c30db50b42ae8c4%26emb%3DMTgyLjIwMS4xNzIuODMCMzQ1OTI2ODcxAgI%3D%26bc%3D%26cna%3DKTz1D1smQgYCAbbJrQWGkZB1%26type%3D0%26embsig%3D1_1467447038_238c3cc84aa2d1dc022a8759ba3c244e"
						width="100%" height="100%" id="youku-player">
					<!--是否允许全屏-->
					<param name="allowFullScreen" value="true">
					<param name="allowScriptAccess" value="always">
					<param name="movie" value="http://static.youku.com/v1.0.0634/v/swf/loader.swf?VideoIDS=XMTM4MzcwNzQ4NA%3D%3D&isShowRelatedVideo=false&winType=BDskin&embedid=MTgyLjIwMS4xNzIuODMCMzQ1OTI2ODcxAgI%3D&wd=&partnerid=5c30db50b42ae8c4&vext=pid%3D5c30db50b42ae8c4%26emb%3DMTgyLjIwMS4xNzIuODMCMzQ1OTI2ODcxAgI%3D%26bc%3D%26cna%3DKTz1D1smQgYCAbbJrQWGkZB1%26type%3D0%26embsig%3D1_1467447038_238c3cc84aa2d1dc022a8759ba3c244e">
					</object>
				</div>
			</div>
		</div>
	</body>
	<script src="js/TSH.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//弹出视频
		$(".video-cont-show").click(function() {
			$("#video").css('display', 'block');
		})
		var hoveroffH = $("#hover").offset().top;
		$(window).scroll(function() {
			var bodyrollT = $("body").scrollTop();
			if (bodyrollT >= hoveroffH) {
				$("#hover").css('position', 'fixed');
				$("#hover").css('top', '0');
				$("#hover").css('opacity', '.9');
			} else {
				$("#hover").css('position', '');
				$("#hover").css('top', '');
				$("#hover").css('opacity', '');
			}
		});
		//头部动画
		setTimeout(function() {
			$(".ipad").addClass("ipadani");
			setTimeout(function() {
				$(".base").addClass("baseani");
				$(".dete").addClass("deteani");
				setTimeout(function() {
					$(".logo").addClass("logoani");
					$(".startra").addClass("startraani");
					setTimeout(function() {
						$(".video-cont-show").addClass("video-cont-showani");
					}, 2000)
				}, 3000)
			}, 1220)
		}, 1000)
		
		//监听事件执行动画
		var bowffH = $(".contbow").offset().top;
		var taooffH = $(".conttaotao").offset().top;
		var garoffH = $(".contgar").offset().top;
		var revoffH = $(".contrev").offset().top;
		$(window).scroll(function() {
			var bodyrollT = $("body").scrollTop();
			if (bodyrollT >= bowffH-bodyrollT/4) {
				$(".contbowber-text").attr("id","contbowber-textani");
			}
			if (bodyrollT >= taooffH-bodyrollT/4) {
				$(".conttaotaober-text").attr("id","conttaotaober-textani");
				$(".taotaopic").attr("id","taotaopicani");
			}
			if (bodyrollT >= garoffH-bodyrollT/4) {
				$(".contgarber-text").attr("id","contgarber-textani");
				$(".garpic").attr("id","garpicani");
			}
			if (bodyrollT >= revoffH-bodyrollT/4) {
				$(".contrevber-text").attr("id","contrevber-textani");
				$(".revpic").attr("id","revpicani");
			}
		});
		
	</script>

</html>